import {
	addNotifyConfigList,
	getNotifyConfigList,
	modifyNotifyConfigList,
	removeNotifyConfigList
} from "@/api/modules/notification";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import BaseSearchForm from "@/components/SearchForm/BaseSearchForm";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { showTips, confirm } from "@/utils/util";
import "../product/product.scss";
import ConfigDetail from "./components/configDetail";
export default defineComponent({
	setup() {
		const proTableRef = ref();
		const columns: ColumnProps[] = [
			{ type: "selection", fixed: "left", width: "auto" },
			{ prop: "name", label: "配置名称", width: "180" },
			// { prop: "source", label: "来源" },
			{ prop: "status", label: "配置状态", width: "100" },
			{ prop: "sendWay", label: "发送方式", width: "200" },
			{ prop: "templateId", label: "模板ID" },
			// { prop: "deptId", label: "分组" },
			{ prop: "operate", label: "更多", width: "150" }
		];
		const buttonsList = ref<any>([]);
		onMounted(async () => {
			// 获取页面按钮权限
			buttonsList.value = await useAuthButtons();
		});
		const dataCallback = (data: any) => {
			return {
				datalist: data.records,
				total: data.total || 0,
				pageIndex: data.current,
				pageSize: data.size
			};
		};
		const getTableList = async (params: any) => {
			return getNotifyConfigList(params);
		};
		const handerBtn = async (fn: string, row: any) => {
			switch (fn) {
				case "mod":
					detailDialog.visible = true;
					currentItem.value = row.row;
					break;
				case "del":
					confirm({ content: "是否删除当前选择的记录？" }).then(async (flag: any) => {
						if (!flag) {
							return;
						}
						let { code } = await removeNotifyConfigList({ ids: [row.row.id] });
						let ok = showTips(code, "删除配置");
						if (ok) {
							proTableRef.value.reset();
						}
					});
					break;
				case "add":
					detailDialog.visible = true;
					currentItem.value = { id: "", source: "1" };
					break;
			}
		};
		const detailDialog = reactive({ visible: false, title: "配置详情" });
		const currentItem = ref({ id: "", source: "1" });
		const submit = async () => {
			if (currentItem.value.id) {
				let { code } = await modifyNotifyConfigList({ ...currentItem.value });
				let ok = showTips(code, "编辑配置");
				if (ok) {
					detailDialog.visible = false;
					proTableRef.value.getTableList();
				}
			} else {
				let { code } = await addNotifyConfigList({ ...currentItem.value, id: crypto.randomUUID() });
				let ok = showTips(code, "新增配置");
				if (ok) {
					detailDialog.visible = false;
					proTableRef.value.reset();
				}
			}
		};
		const state = reactive({
			searchParam: {} as any,
			searchColumns: [{ key: "name", label: "配置名称" }]
		});
		return () => {
			return (
				<div class="hist-alarm-page">
					{detailDialog.visible && (
						<ConfigDetail
							title={detailDialog.title}
							v-model:visible={detailDialog.visible}
							detail={currentItem.value}
							onSubmit={submit}
						></ConfigDetail>
					)}
					<BaseSearchForm
						class="mb-4"
						searchItems={state.searchColumns}
						search={state.searchParam}
						onFeatch={() => proTableRef.value.reset()}
					></BaseSearchForm>
					<ProTable
						ref={proTableRef}
						columns={columns}
						requestApi={getTableList}
						dataCallback={dataCallback}
						initParam={state.searchParam}
						custSearch
					>
						{{
							tableHeader: (scope: any) => {
								return buttonsList.value?.map((item: any) => {
									return (
										<el-button
											class={`iconfont ${item.icon}`}
											type={item.btnClass}
											onClick={() => handerBtn(item.component, scope)}
										>
											{item.title}
										</el-button>
									);
								});
							},
							status: (scope: any) => {
								return scope.row.status == 1 ? "启用" : "停用";
							},
							sendWay: (scope: any) => {
								if (JSON.parse(scope.row.templateId)) {
									return Object.keys(JSON.parse(scope.row.templateId)).map((item: any) => {
										return (
											<el-tag type={item == "1" ? "" : "success"} class="mr-2">
												{" "}
												{item == "1" ? "短信" : "邮件"}
											</el-tag>
										);
									});
								}
							},
							operate: (scope: any) => {
								return (
									<>
										<el-link type="primary" link class="iconfont iconbx-file" onClick={() => handerBtn("mod", scope)}>
											编辑
										</el-link>
										<el-link type="danger" link class="iconfont icontrash-2" onClick={() => handerBtn("del", scope)}>
											删除
										</el-link>
									</>
								);
							}
						}}
					</ProTable>
				</div>
			);
		};
	}
});
